class Main {
    constructor() {
        // this.$('.banner_pic').addEventListener('click', this.picClick);
        this.$('.banner_ri .le').addEventListener('click', this.leClick.bind(this));
        this.$('.banner_ri .ri').addEventListener('click', this.riClick.bind(this));
        this.autoPlay();
        this.$('.banner_pic').addEventListener('mouseover', this.overPlay.bind(this));
        this.$('.banner_pic').addEventListener('mouseout', this.outPlay.bind(this));
        this.countDown()
    }
    index = 0; // 当前图片的下标，默认为0
    lastIndex = 0; // 上一张图片的下标，默认为0
    timer = null;
    times = null;

    // 左箭头的实现
    leClick() {
        this.lastIndex = this.index;
        this.index--;

        // 判断是否超出最小索引
        if (this.index == -1) this.index = this.$('.banner_img li').length - 1;

        // 调用图片转换事件
        this.selectImg(this.index);

    }

    // 右箭头的实现
    riClick() {
        this.lastIndex = this.index;
        this.index++;

        // 判断是否超出最小索引
        if (this.index == this.$('.banner_img li').length) this.index = 0;

        // 调用图片转换事件
        this.selectImg(this.index);
    }

    // 设置定时器
    autoPlay() {
        this.timer = setInterval(() => {
            this.leClick();
        }, 2000)
    }

    // 移入停止
    overPlay() {
        clearInterval(this.timer);
    }

    // 移出启动
    outPlay() {
        this.autoPlay();
    }

    // 实现图片的转换
    selectImg() {
        // 取消原有的类
        this.$('.banner_img .ac').className = '';

        // 设置新出的类
        this.$('.banner_img li')[this.index].className = 'ac';
    }


    /******设置倒计时*********/
    countDown() {

        this.times = setInterval(() => {
            let date = new Date();
            // console.log(date);
            let hour = date.getHours(); // 时
            let minute = date.getMinutes(); // 分
            let second = date.getSeconds();   // 秒
            if (hour % 2 == 0) {
                this.$('#end').innerHTML = hour;
                this.$('#hour').innerHTML = 1;
            } else {
                this.$('#end').innerHTML = hour - 1;
                this.$('#hour').innerHTML = 0;
            }
            this.$('#minute').innerHTML = 59 - minute;
            this.$('#second').innerHTML = 59 - second;
        }, 1000)


    }

    // 获取节点的方法
    $(ele) {
        let res = document.querySelectorAll(ele);
        return res.length == 1 ? res[0] : res;
    }
}

new Main();